<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <div class="app-container">
      <el-card style="margin: 25px;">
        <div
          class="topBox"
          style="width: 100%;"
        >
          <el-row
            style="padding: 20px;"
            type="flex"
            gutter="24"
          >
            <el-col :span="6"> <span>订单编号：{{ reobject.id }}</span></el-col>
            <el-col :span="6"> <span>运单编号：{{ reobject.tranNumber }}</span></el-col>
            <el-col :span="6"> <span>下单时间：{{ reobject.createTime }}</span></el-col>
            <el-col :span="6"> <span>订单状态：{{ reobject.status===22000?'已关闭':reobject.status===23000?'待取件':reobject.status===23001?'已取件':reobject.status===23002?'网点自寄':reobject.status===23003?'网点入库':reobject.status===23004?'待装车':reobject.status===23005?'运输中':reobject.status===23006?'网点出库':reobject.status===23007?'待派送':reobject.status===23008?'派送中':reobject.status===23009?'已签收':reobject.status===23010?'拒收':'已取消' }}</span></el-col>
          </el-row>
          <el-row
            style="padding-left: 20px;"
            type="flex"
          >
            <span>
              预计到达日期:{{ reobject.estimatedArrivalTime }}
            </span>
          </el-row>
        </div>
      </el-card>
      <el-collapse
        accordion
        style="margin: 25px;"
      >
        <el-collapse-item>
          <template slot="title">
            基本信息
          </template>
          <el-row>

            <span><img
              style="width: 14px;height: 18px;"
              src=""
              alt=""
            ></span>
            <span style="margin-left: 10px;font-size: 16px;">发货方</span>
            <div>
              <span style="margin-right: 260px;font-size: 15px;margin-left: 50px;">发货方姓名：{{ reobject.senderName }}</span>
              <span style="font-size: 15px">发货方电话：{{ reobject.senderPhone }}</span>
            </div>
            <div>
              <span style="margin-right: 260px;font-size: 15px;margin-left: 50px;">发货方地址：{{ reobject.senderProvince }}{{ reobject.senderCity }}{{ reobject.senderCounty }}</span>
              <span style="font-size: 15px">详细地址：{{ reobject.senderAddress }}</span>
            </div>
          </el-row>
          <el-row>

            <span><img
              style="width: 14px;height: 18px;"
              src=""
              alt=""
            ></span>
            <span style="margin-left: 10px;font-size: 16px;">收货方</span>
            <div>
              <span style="margin-right: 260px;font-size: 15px;margin-left: 50px;">收货方姓名：{{ reobject.receiverName }}</span>
              <span style="font-size: 15px">收货方电话：{{ reobject.receiverPhone }}</span>
            </div>
            <div>
              <span style="margin-right: 260px;font-size: 15px;margin-left: 50px;">收货方地址：{{ reobject.receiverProvince }}{{ reobject.receiverCity }}{{ reobject.receiverCounty }}</span>
              <span style="font-size: 15px">详细地址：{{ reobject.receiverAddress }}</span>
            </div>
          </el-row>
          <el-row>

            <el-col style="margin-bottom: 20px;">   <span><img
              style="width: 14px;height: 18px;"
              src=""
              alt=""
            ></span> <span style="margin-left: 10px;font-size: 16px;">距离:{{ reobject.distance }}</span></el-col>
            <el-col> <span style="margin-left: 10px;font-size: 16px;margin-left: 25px;">备注:暂无</span></el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-collapse
        accordion
        style="margin: 25px;"
      >
        <el-collapse-item>
          <template slot="title">
            取件信息
          </template>
          <el-row
            type="flex"
            style="margin-bottom: 15px;"
          >
            <el-col><span style="font-size: 15px;">所在网点：{{ reobject.address }}</span></el-col>
            <el-col><span style="font-size: 15px;">取件类型：{{ reobject. pickupType ===1? '网点自寄':'上门取件' }}</span></el-col>
            <el-col><span style="font-size: 15px;">作业状态：</span></el-col>
            <el-col><span style="font-size: 15px;">取件快递员：{{ reobject.name }}</span></el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="6"><span style="font-size: 15px;">快递员电话：{{ reobject.mobile }}</span></el-col>
            <el-col :span="6"><span style="font-size: 15px;">预计取件时间：{{ reobject.estimatedStartTime }}</span></el-col>
            <el-col :span="6"><span style="font-size: 15px;">取件完成时间：</span></el-col>

          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-collapse
        accordion
        style="margin: 25px;"
      >
        <el-collapse-item>
          <template slot="title">
            费用信息
          </template>
          <el-row type="flex">
            <el-col :span="6"><span style="font-size: 15px;">运费：{{ reobject.amount }}    元</span></el-col>
            <el-col :span="6"><span style="font-size: 15px;">支付方式：{{ reobject.paymentMethod===1? '预结' :'到付' }}</span></el-col>
            <el-col :span="6"><span style="font-size: 15px;">付款状态：{{ reobject.paymentStatus ===1? '未付':'已付' }}</span></el-col>

          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-collapse
        accordion
        style="margin: 25px;"
      >
        <el-collapse-item>
          <template slot="title">
            货品信息
          </template>
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="150px"
            > </el-table-column>
            <el-table-column

              prop="id"
              label="货品名称"
            >
            </el-table-column>
            <el-table-column

              prop="transportOrder.id"
              label="货品类型"
            > </el-table-column>
            <el-table-column

              prop="createTime"
              label="重量（千克）"
            >

            </el-table-column>
            <el-table-column

              prop="status"
              label="体积（立方）"
            >

            </el-table-column>
            <el-table-column

              prop="senderName"
              label="操作"
            >
            </el-table-column>

          </el-table>
        </el-collapse-item>
      </el-collapse>

    </div>
  </div>
</template>
<script>
import { orderDetail } from '@/api/order'

export default {
  data() {
    return {
      reobject: {
        id: '', // 订单编号，
        tranNumber: '', // 运单编号
        createTime: '', // 下单时间
        status: '', // 订单状态
        estimatedArrivalTime: '', // 预计到达日期
        senderNam: '', // 发货方姓名
        senderPhone: '', // 发货方电话
        senderProvince: '', // 发货方地址
        senderCity: '', // 发货方地址
        senderCounty: '', // 发货方地址
        senderAddress: '', // 详细地址
        receiverName: '', // 收货方姓名
        receiverPhone: '', // 收货方电话
        receiverProvince: '', // 收货方地址
        receiverCity: '', // 收货方地址
        receiverCounty: '', // 收货方地址
        receiverAddress: '', // 详细地址
        distance: '', // 距离
        address: '', // 所在网点
        pickupType: '', // 取件类型
        // 作业状态
        name: '', // 取件快递员
        mobile: '', // 快递员电话
        estimatedStartTime: '', // 预计取件时间
        // 取件完成时间
        amount: '', // 运费
        paymentMethod: '', // 支付方式
        paymentStatus: ''// 付款状态

      }
    }
  },
  created() {
    this.getId()
  },
  methods: {
    async getId() {
      const id = this.$route.query.id
      // console.log('1', this.$route.query.id)
      const res = await orderDetail(id)
      console.log('1', res)
      this.reobject = res.data
      this.reobject.tranNumber = res.data.transportOrder.id
      // console.log(this.reobject.tranNumber)
      // 快递员信息姓名
      // this.reobject.name = res.data.taskPickup.courier.name
      this.reobject.name = res.data.taskPickup.courier.name
      // console.log(this.reobject.name)
      // 发件人省份
      this.reobject.senderProvince = res.data.senderProvince.name
      console.log(this.reobject.senderProvince)
      // 发件人城市
      this.reobject.senderCity = res.data.senderCity.name
      console.log(this.reobject.senderCity)
      // 发件人县区
      this.reobject.senderCounty = res.data.senderCounty.name
      console.log(this.reobject.senderCounty)
      // 收件人省份
      this.reobject.receiverProvince = res.data.receiverProvince.name
      // 收件人省份
      this.reobject.receiverCity = res.data.receiverCity.name
      // 收件人省份
      this.reobject.receiverCounty = res.data.receiverCounty.name
      // 快递员电话
      this.reobject.mobile = res.data.taskPickup.courier.mobile
      // 所在网点
      this.reobject.address = res.data.taskDispatch.agency.name
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import './index.scss';
</style>

